<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
          <el-form-item label="编号">
            <el-input v-model="params.entity.id" placeholder="请输入编号"/>
          </el-form-item>
<!--          <el-form-item label="定时任务表达式">-->
<!--            <el-input v-model="params.entity.cronExpression" placeholder="请输入定时任务表达式"/>-->
<!--          </el-form-item>-->
          <el-form-item label="描述">
            <el-input v-model="params.entity.cronDescribe" placeholder="请输入描述"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
            <el-button type="primary" @click="openCrons">CRONS 表达式</el-button>
            <!--            <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading"
              :data="tableData.list" style="width: 100%" height="70vh"
              :default-sort="{ prop: 'date', order: 'descending' }"
              @selection-change="handleSelectionChange">
      <!--      <el-table-column fixed type="selection" width="55"/>-->
      <el-table-column prop="id" label="编号" width="60" show-overflow-tooltip/>
      <el-table-column prop="cronExpression" label="定时任务表达式" show-overflow-tooltip/>
      <el-table-column prop="cronDescribe" label="描述" show-overflow-tooltip/>
      <el-table-column prop="cronTriggersClass" label="定时器类" show-overflow-tooltip/>
      <el-table-column prop="statusFlag" label="状态" show-overflow-tooltip>
        <template #default="scope">
          <el-switch
              width="60"
              v-model="scope.row.status"
              inline-prompt
              active-text="执行"
              inactive-text="暂停"
              @change="statusFlagChange(scope.row)"
          />
        </template>

      </el-table-column>
      <!--      <el-table-column prop="sendPeriod" label="发送周期" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="sendDay" label="天" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="sendHour" label="小时" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="lastTime" label="上次发送时间" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="nextTime" label="下次发送时间" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="deviceId" label="发送设备" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="receiveEmails" label="接收邮箱" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="reportType" label="报告类型" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="reportFormat" label="报告格式" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="statisticalPeriod" label="统计周期" width="160" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="subscribeOwner" label="订阅人" width="160" show-overflow-tooltip/>-->

      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
<!--        <template #header>-->
<!--          <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/>-->
<!--        </template>-->
        <template #default="scope">
          <div v-if="scope.row.lockFlag== 0">
            <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除</el-button>
            <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>
            <el-button link type="primary" :icon="Discount" size="small" @click="cronLog(scope.row)">日志</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                   :page-sizes="[10, 20, 50, 100]" layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 新增或者修改页面-->
  <cron-triggers-add-or-edit
      @closeEditDialog="closeEditDialog"
      :addOrEditVisible="addOrEditVisible"
      :ruleForm="ruleForm"
      :addDataType="addDataType"></cron-triggers-add-or-edit>
  <el-drawer
      v-model="cronLogDrawerShow"
      title="日志记录"
      :direction="'rtl'"
      :before-close="handleClose"
      :size="'60%'"
  >
    <cron-triggers-synchro-time-list-drawer :ruleForm="ruleForm"></cron-triggers-synchro-time-list-drawer>
  </el-drawer>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {Delete, Edit, Search, Share, Upload, Plus, Setting, Discount} from '@element-plus/icons-vue'
import {CronTriggers} from "@/apis/model/system/CronTriggersModel";
import {deleteCromTriggersById, cromTriggersPage, updateCronSwitch} from "@/apis/http/system/CronTriggersHttp";
import {StorageConfig} from "@/apis/model/system/StorageConfigModel";
import {updateSwitch} from "@/apis/http/system/StorageConfigHttp";
import CronTriggersSynchroTimeListDrawer from "@/views/system/cron/CronTriggersSynchroTimeListDrawer.vue";
// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {}
})

const ruleForm = ref<CronTriggers>({} as CronTriggers)

// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('add');

const cronLogDrawerShow = ref(false)

const cronLog = (row: CronTriggers) => {
  cronLogDrawerShow.value = true;
  ruleForm.value = row;
}

const handleClose = (done: () => void) => {
  ruleForm.value = {} as CronTriggers;
  done()

}

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  cromTriggersPage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}


// 切换状态
const statusFlagChange = (row: CronTriggers) => {
  console.log(row)
  ElMessageBox.confirm('切换定时任务状态，确定继续?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    const param = {id: row.id, statusFlag: (row.status ? 1 : 0)} as CronTriggers;
    updateCronSwitch(param).then(res => {
      ElMessage({
        type: 'success',
        message: '切换存储类型成功!'
      })
      initList()
    })
  }).catch(() => {
    row.status = !row.status
  });
}

const openCrons = () => {
  window.open('https://www.pppet.net/', '_blank')
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as CronTriggers
  addDataType.value = 'add'
}

//修改弹窗
const editDialog = (row: CronTriggers) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

// 关闭修改弹窗
const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteCromTriggersById(id).then((res: Result) => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}

onMounted(() => {
  initList()
})
</script>

<style>
</style>
